<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-image: url(img/运动.jpeg);
				background-size: cover;
				font-family: "楷体";
			}
			
			
			.fa-user-circle-o{
				position: absolute;
				top: -50px;
				left: calc(40%);
			}
			h1{
				margin: 0;
				padding: 0 0 20px;
				text-align: center;
				font-size: 30px;
			}
			.loginbox p{
				font-weight: bold;
			}
			.loginbox input{
				width: 100%;
				margin-bottom: 30px;
			}
			.loginbox input[type="text"],input[type="password"]{
				border: none;
				border-bottom: 1px solid #FFFFFF;
				background: transparent;
				outline: none;
				height: 45px;
				color: #FFFFFF;
				font-size: 20px;
			}
			.link-to{
				border: none;
				text-align: center;
				width: 300px;
				height: 50px;
				background-color: #B22222;
				color: #FFFFFF;
				font-size: 20px;
				border-radius: 10px;
			}
			
			.link-to:hover{
				cursor: hand;
				background-color:aquamarine ;
			}
			.loginbox a{
				text-decoration: none;
				font-size: 15px;
				color: chocolate;
			}
			.loginbox a:hover{
				color: #7FFFD4;
			}
			.fa-weibo:hover{
				color: #7FFFD4;
			}
			.fa-wechat:hover{
				color: #7FFFD4;
			}
			.fa-qq:hover{
				color: #7FFFD4;
			}
			.loginbox{
				width: 360px;
				height: 480px;
				background-color: darkslategray;
				padding: 70px 30px;
				top: 50%;
				left: 50%;
				position: absolute;
				transform: translate(-50%,-50%);
				box-sizing: border-box;
				border-radius: 10px;
			}
			a:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="loginbox">
			<a href="#"><i class="fa fa-user-circle-o fa-5x" ></i></a>
			<h1>欢迎登录</h1>
			<form>
				<p>姓名</p>
				<input type="text" placeholder="请输入你的姓名" maxlength="10"/>
				<p>密码</p>
				<input type="password" placeholder="请输入你的密码"maxlength="15" />
				<div class="link-to"><a href="主页.html" style="font-size: 25px;">登录</a></div>
				<a href="#">忘记你的密码？</a>
				<br />
				<a href="#">已有账户？</a>
				<br />
				<a href="#"><i class="fa fa-qq"></i></a>
				<a href="#"><i class="fa fa-wechat"></i></a>
				<a href="#"><i class="fa fa-weibo"></i></a>
				
			</form>
		</div>
		
	</body>
</html>
